<script setup lang="js">

import GameRecordHomPagePreviewCard
  from "@/renderer/main-window/components/gamerecord/GameRecordHomPagePreviewCard.vue";
import GameRecordDetailWrapper from "@/renderer/main-window/components/gamerecord/GameRecordDetailWrapper.vue";
import {computed, defineProps, onBeforeMount, onMounted, ref,defineEmits} from "vue";
import GameRecordBase from "@/renderer/main-window/components/gamerecord/GameRecordBase.vue";
import {getSingleGameRecordInfo} from "@/renderer/share/utils/rank.js";

const {recordInfo, summonerInfo} = defineProps({
  "recordInfo": {},
  "summonerInfo": {}
})

const emit = defineEmits([
  'jumpSummonerHomePage',//跳转到其他玩家的主页
])


const displayDetailFlag = ref(false);
const displayBtnIcon = ref('ArrowDownBold');

const showDetailFunc = () => {
  const flag = displayDetailFlag.value === true;
  displayDetailFlag.value = !flag;
  if (flag) {
    displayBtnIcon.value = 'ArrowDownBold';
  } else {
    displayBtnIcon.value = 'ArrowUpBold';
  }
}


const calcDefaultClass = (currentParticipantInfo) => {
  if (isSuccess(currentParticipantInfo)) {
    return 'success'
  } else {
    return 'failed'
  }
}

const isSuccess = (currentParticipantInfo) => {
  return currentParticipantInfo?.info?.baseInfo?.win === 'Win';
}

const currentParticipantInfo=ref({})
const participantInfos=ref({})
const totalTeamInfos=ref({})


onBeforeMount(()=>{
  getSingleGameRecordInfo({
    'gameId':recordInfo?.gameId,
    'summonerInfo':summonerInfo
  }).then(res => {
    currentParticipantInfo.value = res.currentParticipantInfo;
    participantInfos.value = res.participantInfos;
    totalTeamInfos.value = res.totalTeamInfos;
  })
})
</script>

<template>

      <div style="width: 100%;display: flex; border: 1px solid var(--el-border-color) ;margin:12px 0">
        <GameRecordHomPagePreviewCard
            :current-participant-info="currentParticipantInfo"
            :participant-infos="participantInfos"
        />

        <div style="display: flex;flex-direction: column;width: 36px"
             @mouseenter=""
             :class="calcDefaultClass(currentParticipantInfo)">
          <el-button
              @mouseenter=""
              link
              class="home_page_open_detail_btn"
              @click="showDetailFunc"
              :icon="displayBtnIcon"/>
        </div>
      </div>

      <template v-if="displayDetailFlag">
        <GameRecordDetailWrapper
            @jumpSummonerHomePage="args => {emit('jumpSummonerHomePage',args);}"
            :totalTeamInfos="totalTeamInfos"
            :current-puuid="summonerInfo.puuid"
            :participantInfos="participantInfos"
        />
      </template>

</template>

<style scoped>
.home_page_open_detail_btn {
  height: 100%;
  width: 100%;
  padding: 0;
}

.success {
  background-color: var(--var-success-aside-background-color);
}

.failed {
  background-color: var(--var-failed-aside-background-color);
}

</style>